<script setup lang="ts">
// UnoCSS示例页面
</script>

<template>
  <view class="container p-30rpx">
    <view class="section mb-40rpx">
      <view class="section-title">文本样式</view>
      <view class="demo-item">
        <text class="text-primary">主题色文本</text>
      </view>
      <view class="demo-item">
        <text class="text-success">成功色文本</text>
      </view>
      <view class="demo-item">
        <text class="text-warning">警告色文本</text>
      </view>
      <view class="demo-item">
        <text class="text-error">错误色文本</text>
      </view>
      <view class="demo-item">
        <text class="text-28rpx">文本大小 28rpx</text>
      </view>
      <view class="demo-item">
        <text class="font-bold">粗体文本</text>
      </view>
    </view>

    <view class="section mb-40rpx">
      <view class="section-title">边距与布局</view>
      <view class="demo-item flex-col">
        <view class="p-20rpx bg-gray-100 mb-10rpx">p-20rpx 内边距</view>
        <view class="px-20rpx bg-gray-100 mb-10rpx">px-20rpx 水平内边距</view>
        <view class="py-20rpx bg-gray-100 mb-10rpx">py-20rpx 垂直内边距</view>
        <view class="m-20rpx bg-gray-100 mb-10rpx">m-20rpx 外边距</view>
      </view>

      <view class="demo-item">
        <view class="flex justify-between bg-gray-100 p-10rpx">
          <view class="bg-primary text-white p-10rpx">项目1</view>
          <view class="bg-primary text-white p-10rpx">项目2</view>
          <view class="bg-primary text-white p-10rpx">项目3</view>
        </view>
      </view>

      <view class="demo-item">
        <view class="flex-col items-center bg-gray-100 p-10rpx">
          <view class="bg-primary text-white p-10rpx mb-10rpx w-200rpx text-center">项目1</view>
          <view class="bg-primary text-white p-10rpx mb-10rpx w-200rpx text-center">项目2</view>
          <view class="bg-primary text-white p-10rpx w-200rpx text-center">项目3</view>
        </view>
      </view>
    </view>

    <view class="section mb-40rpx">
      <view class="section-title">背景与边框</view>
      <view class="demo-item">
        <view class="bg-primary p-20rpx text-white">主题色背景</view>
      </view>
      <view class="demo-item">
        <view class="bg-success p-20rpx text-white">成功色背景</view>
      </view>
      <view class="demo-item">
        <view class="border border-primary p-20rpx rounded-8rpx">带边框元素</view>
      </view>
      <view class="demo-item">
        <view class="shadow-lg p-20rpx bg-white rounded-20rpx">带阴影元素</view>
      </view>
    </view>

    <view class="section mb-40rpx">
      <view class="section-title">组合类示例</view>
      <view class="demo-item">
        <view class="p-20rpx rounded-lg bg-primary text-white shadow-md">
          <text>主要卡片</text>
        </view>
      </view>
      <view class="demo-item">
        <view class="p-20rpx rounded-lg bg-success text-white shadow-md">
          <text>成功卡片</text>
        </view>
      </view>
      <view class="demo-item">
        <view class="p-20rpx rounded-lg bg-warning text-white shadow-md">
          <text>警告卡片</text>
        </view>
      </view>
      <view class="demo-item">
        <view class="p-20rpx rounded-lg bg-primary text-white text-center shadow-md">
          <text>主要按钮</text>
        </view>
      </view>
      <view class="demo-item">
        <view
          class="w-80rpx h-80rpx rounded-full bg-gray-200 flex-x-center-y-center text-gray-600 text-40rpx"
        >
          <text class="i-carbon-user" />
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.rounded-8rpx {
  border-radius: 8rpx;
}

.rounded-20rpx {
  border-radius: 20rpx;
}

.w-200rpx {
  width: 200rpx;
}
</style>
